<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="充值记录" titleTintColor="#fff">
			<text slot="back" class="iconfont">&#xe63d;</text>
			<view slot="string">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<text class="uni-input">{{ array[index] }}</text>
				</picker>
			</view>
			<text slot="iconfont" class="iconfont">&#xe673;</text>
		</navigation>
		<view class="trans-header">
			<view class="trans-h-v">
				<span>可用余额</span>
				<span>{{ credit2 }}</span>
			</view>
			<view class="trans-h-v">
				<span>未结金额</span>
				<span>{{ credit_expend3 }}</span>
			</view>
			<view class="trans-h-v">
				<span>账户总额</span>
				<span>{{ credit_total }}</span>
			</view>
		</view>
		<view class="trans-condition">
			<view class="t-c">
				<view>起始时间</view>
				<view>
					<picker mode="date" :value="startPropertyData" :start="startDate" :end="endDate" @change="bindStartDateChange">
						<text style="font-weight: normal; padding-right: 5px;">{{ startPropertyData }}</text>
					</picker>
				</view>
			</view>
			<view class="t-c">
				<view>起始时间</view>
				<view>
					<picker mode="date" :value="endPropertyData" :start="startDate" :end="endDate" @change="bindEndDateChange">
						<text style="font-weight: normal; padding-right: 5px;">{{ endPropertyData }}</text>
					</picker>
				</view>
			</view>
			<view class="t-c t-c-btn">
				<view class="t-c-btn-now" @click="selectDay('oneDay')">单日</view>
				<view class="t-c-btn-all" @click="selectDay('allDay')">全部</view>
			</view>
		</view>
		<view class="my-list">
			<view class="my-item" v-show="!empty(listData)" v-for="(item, index) in listData" :key="index" @click="selectDetail(item.signid)">
				<view class="my-item-i content">
					<text class="i-title">{{ item.tpyeName }}</text>
					<text class="i-title i-t-money">
						<block v-if="empty(item.cash)">(0元)</block>
						<block v-if="!empty(item.cash)">({{ decimal(item.cash) }}元)</block>  
					</text>
				</view>
				<view class="my-item-i icon-right">
						<block v-if="!empty(item.createds)">{{datestr(item.createds)}}</block>    
				</view>
			</view>
			<view class="my-item" v-show="empty(listData)">
				<view class="my-item-i content"><text class="i-title">暂无数据</text></view>
			</view>
		</view>
		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';

export default {
	components: { Tabbar, navigation },
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			array: ['全部', '充值', '提现', '投注', '投注中奖'],
			index: 0,
			startPropertyData: currentDate,
			endPropertyData: currentDate,
			nowData: currentDate, //击日的账户的时候用到
			selectType: 'all',
			listData: [], //所有的数据
			credit2: '', //可用余额
			credit_expend3: '', //未结金额
			credit_total: '' //账号总额
		};
	},
	onLoad(option) {
		this.getAssets();
		let tempP = Tools.paramAESDecrypt(decodeURIComponent(option.p));
		if(!Tools.isEmpty(tempP)){
			let paramsObj = JSON.parse(tempP);
			this.index=parseInt(paramsObj.name);
			this.selectType=paramsObj.type;
			this.selectDay("oneDay");
		}
	},
	onShow() {
		// this.$store.commit('setTabbarIndex', "5")
		console.log('store:', this.$store.state.tabbar_now_index);
		// uni.showTabBar({
		// 	fail:function(e){
		// 		console.log("失败:",e);
		// 	},
		// 	"animation":true,
		// 	complete:function(e){
		// 		console.log("挖沟槽:",e);
		// 	}
		// });
	},
	onUnload: {},
	onBackPress(options) {
		console.log('个人:', options);
		// if (options.from === 'navigateBack') {
		// 	return false;
		// }
		// this.back();
		// return true;
	},
	onNavigationBarButtonTap(e) {
		console.log('返回的点击的情况:', JSON.stringify(e));
	},
	methods: {
		/**
		 * 选择查看的类别
		 */
		bindPickerChange(e) {
			this.index = e.target.value;
			if (this.index == 0 || this.index == '0') {
				this.selectType = 'all';
			} else {
				this.selectType = this.index + '';
			}
		},
		/**
		 * 选择开始的时间
		 */
		bindStartDateChange(e) {
			this.startPropertyData = e.target.value;
		},
		/**
		 * 选择结束的时间
		 */
		bindEndDateChange(e) {
			this.endPropertyData = e.target.value;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		/**
		 * 获取资金的情况
		 */
		getAssets() {
			let that = this;
			this.getMoney(function(data){
				that.credit2 = data.credit2; //可用余额
				that.credit_expend3 = data.credit_expend3; //未结金额
				that.credit_total = data.credit2 + data.credit_expend3; //账号总额
			});
		},
		/**
		 * 选择单日还是全部的按钮
		 * @param type 是单日还是全部
		 */
		selectDay(type) {
			let that = this;
			let obj = '{}';
			if (type == 'oneDay') {
				obj = '{"signid":"' + that.selectType + '","stime":"' + this.nowData + '","etime":"' + this.nowData + '"}';
			} else if (type == 'allDay') {
				obj = '{"signid":"' + that.selectType + '","stime":"' + that.startPropertyData + '","etime":"' + that.endPropertyData + '"}';
			}
			Net.ayiHttp(
				URL.MENU_SHOWACCTLISTS,
				obj,
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						that.listData = data.rowset;
						console.log('处理好了的', data);
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		selectDetail(signid){
			this.navigateToSigleUrl('/pages/recharge/transactionlist/transactionlist?signid='+signid+"&stime="+this.startPropertyData+"&etime="+this.endPropertyData);
		}
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	}
};
</script>

<style lang="scss">
.trans-header {
	height: 140rpx;
	padding: 20rpx 0rpx;
	background: #f1f1f1;
	color: #666;
	font-weight: 700;
	border-bottom: 1px solid #a4a4a4;
	display: flex;
	.trans-h-v {
		flex: 1;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		span {
			display: block;
			font-size: 28rpx;
			color: #666;
			font-weight: 700;
		}
	}
}
//时间筛选的区域
.trans-condition {
	height: 140rpx;
	border-bottom: 1px solid #e8e9ec;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	.t-c {
		flex: 1;
		font-size: 28rpx;
		text-align: center;
		color: #999;
	}
	.t-c-btn {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		.t-c-btn-now,
		.t-c-btn-all {
			width: 100rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: #fff;
			background: $wlh-color-defealt;
			margin-top: 4rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
			margin-right: 20rpx;
		}
	}
}
// 列表的样式
.my-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0rpx 16rpx;
	border-bottom: 1px solid #e8e9ec;
	.my-item-i {
		display: block;
		position: relative;
		padding: 16rpx 0rpx;
	}
	.content {
		flex: 3;
		.i-title {
			color: #000000;
			font-size: 34rpx;
			display: block;
			&.i-t-money {
				color: #a6a6a6;
			}
		}
	}
	.icon-right {
		flex: 1;
		color: #a6a6a6;
		font-size: 28rpx;
		text-align: right;
	}
}
</style>
